
<template>
  <view class="template-about tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->


    <view class="top-backgroup">
      <!-- <image src='https://resource.tuniaokj.com/images/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image> -->
    </view>




    <view class="about__wrap">

      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <!-- 图标logo -->
            <view class="logo-pic tn-shadow" >
              <view class="logo-image">
                <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
                </view>
                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
              </view>
            </view>
            <view class="tn-padding-right tn-color-white">
              <view class="tn-padding-right tn-padding-left-sm tn-text-xxl" style="color: black;">
                后台管理员
              </view>
              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis" style="color: gray;">门店编号: z52666888</view>
            </view>

          </view>
        </view>
      </view>

      <!-- 方式7 start-->
      <view class="tn-flex " style="display: flex;flex-direction:column;height:400rpx;background-color: #4E9B52;padding-top: 40rpx;border-radius: 12rpx;position: relative;">
		  <view class="earn-nav">
		  	<view class="earn-navLeft">
		  		我的收益
		  	</view>
			<view class="earn-navRight">
				立即提现
			</view>
		  </view>

		  <view class="earn-firstBox">
		  	<view class="earn-smclock" style="margin-left: 5%;">
		  		<view class="earn-clockUp">
		  			0.0
		  		</view>
				<view class="earn-clockDown">
					今日收益(元)
				</view>
		  	</view>

			<view class="line-between"></view>

			<view class="earn-smclock" style="margin-right: 5%;">
				<view class="earn-clockUp">
					5890.0
				</view>
				<view class="earn-clockDown">
					本月收益(元)
				</view>
			</view>
		  </view>

		  <view class="earn-secondBox">
		  	<view class="earn-smclock">
		  		<view class="earn-clockUp">
		  			42398.99
		  		</view>
		  		<view class="earn-clockDown">
		  			累计收益(元)
		  		</view>
		  	</view>



		  	<view class="earn-smclock" style="width: 33%; border-left: 2rpx solid lightgray; border-right: 2rpx solid lightgray;">
		  		<view class="earn-clockUp">
		  			22579.0
		  		</view>
		  		<view class="earn-clockDown">
		  			累计提现(元)
		  		</view>
		  	</view>



			<view class="earn-smclock">
				<view class="earn-clockUp">
					1620.05
				</view>
				<view class="earn-clockDown">
					账户余额(元)
				</view>
			</view>
		  </view>
        <!-- <view class="tn-flex-1 my-shadow tn-margin-right-sm tn-bg-white" style="padding: 30rpx 0;">
		<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <image class="" src='https://resource.tuniaokj.com/images/my/my17.png' mode='aspectFit'></image>
            </view>
            <view class="tn-text-center">
              <view class="tn-text-ellipsis tn-color-gray--dark">插件市场地址</view>
            </view>
          </view>
        </view> -->
       <!-- <view class="tn-flex-1 my-shadow tn-margin-left-sm tn-bg-white" style="padding: 30rpx 0;">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon7__item--icon tn-flex tn-flex-row-center tn-flex-col-center">
              <image class="" src='https://resource.tuniaokj.com/images/my/my14.png' mode='aspectFit'></image>
            </view>
            <view class="tn-text-center">
              <view class="tn-text-ellipsis tn-color-gray--dark">Gitee地址</view>
            </view>
          </view>
        </view> -->
      </view>
      <!-- 方式7 end-->


      <!-- 更多信息-->
      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
		  <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
		    <view class="tn-flex tn-flex-col-center">
		      <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-8 tn-color-white">
		        <view class="tn-icon-message-fill"></view>
		      </view>
		      <view class="tn-margin-left-sm tn-flex-1">后台消息</view>
		      <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view>
		    </view>
		  </tn-list-cell>
		  <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
		    <view class="tn-flex tn-flex-col-center">
		      <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-6 tn-color-white">
		        <view class="tn-icon-phone-fill"></view>
		      </view>
		      <view class="tn-margin-left-sm tn-flex-1">问题咨询</view>
		      <view class="tn-margin-left-sm tn-color-orangered tn-text-sm tn-padding-left-xs tn-padding-right-xs tn-bg-orange--disabled tn-round">136****0470</view>
		    </view>
		  </tn-list-cell>

        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <view class="tn-flex tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-2 tn-color-white">
              <view class="tn-icon-set-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">设置日志</view>
            <!-- <view class="tn-margin-left-sm tn-color-gray">懒</view> -->
          </view>
        </tn-list-cell>
      </view>

      <!-- 更多信息-->
      <view class="about-shadow tn-margin-top-xl tn-padding-top-sm tn-padding-bottom-sm">
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <view class="tn-flex tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-16 tn-color-white" >
              <view class="tn-icon-wechat-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">合作勾搭</view>
            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <view class="tn-flex tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-5 tn-color-white" >
              <view class="tn-icon-logo-tuniao"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">关于我们</view>
            <view class="tn-margin-left-sm tn-color-cyan tn-icon-link"></view>
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <view class="tn-flex tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-1 tn-color-white">
              <view class="tn-icon-like-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">赞赏北北</view>
            <!-- <view class="tn-margin-left-sm tn-color-blue tn-icon-copy-fill"></view> -->
          </view>
        </tn-list-cell>
        <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
          <view class="tn-flex tn-flex-col-center">
            <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-cool-bg-color-12 tn-color-white">
              <view class="tn-icon-safe-fill"></view>
            </view>
            <view class="tn-margin-left-sm tn-flex-1">安全保障</view>
            <view class="tn-margin-left-sm tn-color-red tn-icon-fire-fill"></view>
          </view>
        </tn-list-cell>
      </view>

    </view>






  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import NavIndexButton from '@/libs/components/nav-index-button.vue'
  export default {
    name: 'about-demo-2',
    mixins: [template_page_mixin],
    components: { NavIndexButton },
    data(){
      return {
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-about{
  }
  /* 顶部背景图 start */
  .top-backgroup {
    height: 300rpx;
    z-index: -1;
	background-image: linear-gradient(to bottom, #D6FADB, #f6f7f8);

  }
  /* 顶部背景图 end */

  /* 用户头像 start */
  .logo-image{
    width: 120rpx;
    height: 120rpx;
    position: relative;
    background-color: #FFFFFF;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
  }

  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }

  .about {

    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: -230rpx;
    }
  }
  /* 页面 end*/

  .my-shadow{
      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
      border-radius: 20rpx;
  }

  /* 图标容器7 start */
  .icon7 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 10rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 0;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }

  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;

      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 28rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
    /* 图标容器1 end */

    /* 底部tabbar start*/
    .footerfixed{
     position: fixed;
     width: 100%;
     bottom: 0;
     z-index: 999;
     background-color: #FFFFFF;
     box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    }

    .tabbar {
      display: flex;
      align-items: center;
      min-height: 110rpx;
      justify-content: space-between;
    	padding: 0;
    	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
    	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    }

    .tabbar .action {
    	font-size: 22rpx;
    	position: relative;
    	flex: 1;
    	text-align: center;
    	padding: 0;
    	display: block;
    	height: auto;
    	line-height: 1;
    	margin: 0;
    	overflow: initial;
    }

    .tabbar .action .bar-icon {
    	width: 100rpx;
    	position: relative;
    	display: block;
    	height: auto;
    	margin: 0 auto 10rpx;
    	text-align: center;
    	font-size: 42rpx;
    }

    .tabbar .action .bar-icon image {
    	width: 50rpx;
    	height: 50rpx;
    	display: inline-block;
    }
    //收益框
	.earn-navLeft{
		color: white;
		font-size: 36rpx;
		margin-left: 40rpx;
		line-height: 70rpx;
	}
	.earn-navRight{
		width: 170rpx;
		height: 70rpx;
		font-weight: bold;
		line-height: 70rpx;
		background-color: #FFCA28;
		border-radius: 24rpx;
		margin-right: 40rpx;
	}
	.earn-nav{
		height: 70rpx;
		width: 100%;
		position: absolute;
		top: 8%;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		text-align: center;
	}
	.earn-firstBox{
		width: 100%;
		position: absolute;
		top: 37%;
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.earn-secondBox{
		width: 100%;
		position: absolute;
		top: 70%;
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
   .earn-clockUp{
	   color: white;

	   font-size: 40rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
   }
   .earn-clockDown{
	   color: #F8F7F8;
	   opacity: 0.65;
	   font-size: small;
	   display: flex;
	   align-items: center;
	   justify-content: center;

	}
	.line-between{
		background-color:white;
		width: 2rpx;
		height:80rpx;
		opacity: 0.5;
	}

</style>
